<template>
    <div id="service-nav"
         @mouseenter="isShow(true)"
         @mouseleave="isShow(false)"
    >
      <div class="item-wrapper">
        <div class="item"
             v-for="item in title"
             :class="{active : $route.path.indexOf(item.path) !== -1}"
             @click="changeRouter(item.key)">
          {{item.value}}
        </div>
      </div>
    </div>

</template>

<script>
  export default {
    name: "ServiceNav",
    data(){
      return{
        title:[
          {key: '0',value:'公司服务',path:'companyService'},
          {key: '1',value:'知识产权',path:'intellectualProperty'},
          {key: '2',value:'法律文书',path:'legalDocument'},
          {key: '3',value:'资质证照',path:'qualificationCertificate'},
          {key: '6',value:'法律求助',path:'lawHelp'},
        ],
        currentIndex : '0',
      }
    },
    methods:{
      isShow(item){
        if(item === false)
            this.$emit('hideService',{index:'3'})
        else{
           this.$emit('hideService',{index:'1'})
        }
      },
      changeRouter(index){
        for(let i=0 ; i<this.title.length;i++)
        {
          if(this.title[i].key === index){
            this.$router.push('/service/'+this.title[i].path)
          }
        }
      }
    }
  }
</script>

<style scoped>
  #service-nav{
    /*width: 100vw;*/
    height: 100px;
    background-color: #125395;
  }
  .item-wrapper{
    display: flex;
    justify-content: center;
  }
  .item{
    width: 180px;
    height: 100px;
    line-height: 100px;
    font-size: 20px;
    /*color: #383c40;*/
    color: #e7d9d9;
  }
  .item:hover{
    cursor: pointer;
    color: #098aec;
  }
  .active{
    color: #098aec;
  }
</style>